<script lang="ts" setup name="know-ledge-list">
import { ref } from 'vue'
import KnowledgeCard from './KnowledgeCard.vue'
import { getKnowledgePage } from '@/services/consult'
import type { KnowledgePage, KnowledgeList, KnowledgeType } from '@/types/consult'
// 1. 上拉加载更多
const props = defineProps<{ type: KnowledgeType }>()
// 定义当前页
const current = ref(1)
// 定义页容量
const pageSize = 5
// 定义开始加载状态
const loading = ref(false)
// 定义结束加载状态
const finished = ref(false)
// 数据源列表
const list = ref<KnowledgeList>([])
// 数据源对象
const knowledgeParasm = ref<KnowledgePage>({} as KnowledgePage)
// 加载下一页数据时触发
const onLoad = async () => {
  const res = await getKnowledgePage({
    type: props.type,
    current: current.value,
    pageSize: pageSize
  })
  // 保存数据源对象
  knowledgeParasm.value = res.data
  // 保存数据源列表
  list.value.push(...res.data.rows)
  list.value.length >= res.data.total ? finished.value = true : current.value ++
  loading.value = false
}
</script>

<template>
  <div class="knowledge-list">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多内容了" @load="onLoad">
      <KnowledgeCard :item="i" v-for="i in list" :key="i.id" />
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>